.check-label-size(@padding; @font-size; @border-radius) {
    padding: @padding;
    font-size: @font-size;
    border-radius: @border-radius;
}

.check-label-color(@color; @background; @border) {
    color: @color;
    background-color: @background;
    border-color: @border;
    // a inside Button which only work in Chrome
    // http://stackoverflow.com/a/17253457
    > a:only-child {
        color: currentColor;
        &:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: transparent;
        }
    }
}

.check-label-variant(@color; @background; @border) {
    .check-label-color(@color; @background; @border);

    &:hover
    //&:focus
    {
        .check-label-color(tint(@color, 20%); tint(@background, 20%); tint(@border, 20%));
    }
    &:active,
    &.active {
        .check-label-color(shade(@color, 5%); shade(@background, 5%); shade(@background, 5%));
    }

    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        &,
        &:hover,
        &:focus,
        &:active,
        &.active {
            .check-label-color(@check-label-disable-color; @check-label-disable-bg; @check-label-disable-border);
        }
    }
}

.check-label-group-base(@checkLabelClassName) {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    > .@{checkLabelClassName} {
        position: relative;
        float: left;
        &:hover,
        //&:focus,
        &:active,
        &.active {
            z-index: 2;
        }
    }

    & .@{checkLabelClassName}-icon-only .ivu-icon {
        font-size: 14px;
        position: relative;
        top: 1px;
    }

    &-large .@{checkLabelClassName}-icon-only .ivu-icon{
        font-size: 16px;
        top: 2px;
    }

    &-small .@{checkLabelClassName}-icon-only .ivu-icon{
        font-size: 12px;
        top: 0;
    }

    &-circle .@{checkLabelClassName} {
        border-radius: @check-label-circle-size;
    }

    // size
    &-large&-circle .@{checkLabelClassName} {
        border-radius: @check-label-circle-size-large;
    }
    &-large {
        & > .@{checkLabelClassName} {
            .check-label-size(@check-label-padding-large; @check-label-font-size-large; @check-label-border-radius);
        }
    }

    &-small&-circle .@{checkLabelClassName} {
        border-radius: @check-label-circle-size-small;
    }
    &-small {
        & > .@{checkLabelClassName}{
            .check-label-size(@check-label-padding-small; @check-label-font-size; @check-label-border-radius-small);
            > .@{css-prefix-iconfont} {
                font-size: @check-label-font-size;
            }
        }
    }
}

.check-label-group-vertical-base(@checkLabelClassName) {
    display: inline-block;
    vertical-align: middle;
    > .@{checkLabelClassName} {
        display: block;
        width: 100%;
        max-width: 100%;
        float: none;
    }
}

.check-label() {
    display: inline-block;
    margin-bottom: 0;
    font-weight: @check-label-font-weight;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: @line-height-base;
    user-select: none;
    .check-label-size(@check-label-padding-base; @check-label-font-size; @check-label-border-radius);
    //transform: translate3d(0, 0, 0);
    //transition: all @transition-time linear;
    transition: color @transition-time linear, background-color @transition-time linear, border @transition-time linear, box-shadow @transition-time linear;

    > .@{css-prefix-iconfont} {
        line-height: 1;
    }

    &,
    &:active,
    &:focus {
        outline: 0;
    }

    &:not([disabled]):hover {
        text-decoration: none;
    }

    &:not([disabled]):active {
        outline: 0;
        // transition: none;  // 如果不注释此行，那么active会和focus同时触发，此时focus的开始动画transition会无效
    }

    &.disabled,
    &[disabled] {
        cursor: @cursor-disabled;
        > * {
            pointer-events: none;
        }
    }

    &-large {
        .check-label-size(@check-label-padding-large; @check-label-font-size-large; @check-label-border-radius);
    }

    &-small {
        .check-label-size(@check-label-padding-small; @check-label-font-size; @check-label-border-radius-small);
    }
}

// Default
.check-label-default() {
    .check-label-variant(@check-label-default-color; @check-label-default-bg; @check-label-default-border);

    &:hover
    //&:focus
    {
        .check-label-color(tint(@primary-color, 20%); white; tint(@primary-color, 20%));
    }
    &:active,
    &.active {
        .check-label-color(shade(@primary-color, 5%); white; shade(@primary-color, 5%));
    }
    .active-check-label-color(@primary-color);
}

// Primary
.check-label-primary() {
    .check-label-variant(@check-label-primary-color; @check-label-primary-bg; @primary-color);

    &:hover,
    //&:focus,
    &:active,
    &.active {
        color: @check-label-primary-color;
    }
    .active-check-label-color(@primary-color);
}

// Ghost
.check-label-ghost() {
    .check-label-variant(@check-label-ghost-color, @check-label-ghost-bg, @check-label-ghost-border);

    &:hover
    //&:focus
    {
        .check-label-color(tint(@primary-color, 20%); @check-label-ghost-bg; tint(@primary-color, 20%));
    }
    &:active,
    &.active {
        .check-label-color(shade(@primary-color, 5%); @check-label-ghost-bg; shade(@primary-color, 5%));
    }
    .active-check-label-color(@primary-color);
}

// Dashed
.check-label-dashed() {
    .check-label-variant(@check-label-ghost-color, @check-label-ghost-bg, @check-label-ghost-border);
    border-style: dashed;

    &:hover
    //&:focus
    {
        .check-label-color(tint(@primary-color, 20%); @check-label-ghost-bg; tint(@primary-color, 20%));
    }
    &:active,
    &.active {
        .check-label-color(shade(@primary-color, 5%); @check-label-ghost-bg; shade(@primary-color, 5%));
    }
    .active-check-label-color(@primary-color);
}

// Text
.check-label-text() {
    .check-label-variant(@check-label-ghost-color, @check-label-ghost-bg, transparent);

    // for disabled
    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        &,
        &:hover,
        &:focus,
        &:active,
        &.active {
            .check-label-color(@check-label-disable-color; @check-label-ghost-bg; transparent);
        }
    }

    &:hover
        //&:focus
    {
        .check-label-color(tint(@primary-color, 20%); @check-label-ghost-bg; transparent);
    }
    &:active,
    &.active {
        .check-label-color(shade(@primary-color, 5%); @check-label-ghost-bg; transparent);
    }
    .active-check-label-color(@primary-color);
}

// Color
// for tabindex
.active-check-label-color(@color) {
    &:focus {
        box-shadow: 0 0 0 2px fade(@color, 20%);
    }
}
.check-label-color(@color) {
    .check-label-variant(@check-label-primary-color; @color; @color);

    &:hover,
        //&:focus,
    &:active,
    &.active {
        color: @check-label-primary-color;
    }

    .active-check-label-color(@color);
}

// Circle for Icon
.check-label-circle(@checkLabelClassName: ivu-check-label) {
    border-radius: @check-label-circle-size;

    &.@{checkLabelClassName}-large{
        border-radius: @check-label-circle-size-large;
    }

    &.@{checkLabelClassName}-size{
        border-radius: @check-label-circle-size-small;
    }

    &.@{checkLabelClassName}-icon-only{
        .square(@check-label-circle-size);
        .check-label-size(0; @font-size-base + 2; 50%);

        &.@{checkLabelClassName}-large{
            .square(@check-label-circle-size-large);
            .check-label-size(0; @check-label-font-size-large + 2; 50%);
        }

        &.@{checkLabelClassName}-small{
            .square(@check-label-circle-size-small);
            .check-label-size(0; @font-size-base; 50%);
        }
    }
}

// Group
.check-label-group(@checkLabelClassName: ivu-check-label) {
    .check-label-group-base(@checkLabelClassName);

    .@{checkLabelClassName} + .@{checkLabelClassName},
    .@{checkLabelClassName} + &,
    & + .@{checkLabelClassName},
    & + & {
        margin-left: -1px;
    }

    .@{checkLabelClassName}:not(:first-child):not(:last-child) {
        border-radius: 0;
    }

    &:not(&-vertical) > .@{checkLabelClassName}:first-child {
        margin-left: 0;
        &:not(:last-child) {
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
        }
    }

    &:not(&-vertical) > .@{checkLabelClassName}:last-child:not(:first-child) {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
    }

    & > & {
        float: left;
    }

    & > &:not(:first-child):not(:last-child) > .@{checkLabelClassName} {
        border-radius: 0;
    }

    &:not(&-vertical) > &:first-child:not(:last-child) {
        > .@{checkLabelClassName}:last-child {
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
            padding-right: 8px;
        }
    }

    &:not(&-vertical) > &:last-child:not(:first-child) > .@{checkLabelClassName}:first-child {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
        padding-left: 8px;
    }
}

.check-label-group-vertical(@checkLabelClassName: ivu-check-label) {
    .check-label-group-vertical-base(@checkLabelClassName);

    .@{checkLabelClassName} + .@{checkLabelClassName},
    .@{checkLabelClassName} + &,
    & + .@{checkLabelClassName},
    & + & {
        margin-top: -1px;
        margin-left: 0px;
    }

    > .@{checkLabelClassName}:first-child {
        margin-top: 0;
        &:not(:last-child) {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }
    }

    > .@{checkLabelClassName}:last-child:not(:first-child) {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    & > &:first-child:not(:last-child) {
        > .@{checkLabelClassName}:last-child {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            padding-bottom: 8px;
        }
    }

    & > &:last-child:not(:first-child) > .@{checkLabelClassName}:first-child {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        padding-top: 8px;
    }
}
